<template>
    <div class="password-container">
        <mt-field label="用户名：" placeholder="请输入用户名" v-model="username"></mt-field>
        <mt-field label="邮箱：" placeholder="请输入邮箱" type="email" v-model="email" :state="sta"></mt-field>
        <mt-field label="密码：" placeholder="请输入密码" type="password" v-model="password"></mt-field>
        <mt-field label="手机号：" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
        <mt-field label="生日：" placeholder="请输入生日" type="date" v-model="birthday"></mt-field>
        <!--<mt-field label="验证码" v-model="captcha">-->
            <!--&lt;!&ndash;<img src="../assets/100x100.png" height="45px" width="100px">&ndash;&gt;-->
        <!--</mt-field>-->
    </div>
</template>

<script>
export default {
    data(){
        return {
            username:'',
            email:'',
            password:'',
            phone:'',
            birthday:'',
            sta:''
        }
    },
    created(){
        this.isEmailState();
    },
    methods: {
        isEmailState(){
            var re = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            var re1 = /[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+/;
            if (re.test(this.email)) {
                this.sta='success';
            }else if(re1.test(this.email)){
                this.sta='warning';
            }
        }
    }

}
</script>

<style lang="less" >
    .password-container {
        .mint-cell-wrapper {
            background-image: none;
            margin: 5px 3px;
            display: flex;
            flex: 1;
            .mint-cell-title {
                text-align: justify;
                justify-content: space-between;
                text-align-last:justify;
                padding-right: 23px;
            }
        }
        .mint-cell.mint-field {
            margin: 5px 3px;
        }

        input[type=text],
        input[type=email],
        input[type=password],
        input[type=tel],
        input[type=datetime-local]{
            margin-bottom:0;
        }
        .mint-cell:last-child {
            background-image: none;
            .mint-cell-title{
                padding-bottom: 10px;

            }

        }

    }


</style>